<script setup lang='ts'>
interface TabItem {
  [text: string]: any
  value?: string | number
  label: string
  icon?: string
  path?: string
  useCloudImg?: boolean
  infoTip?: string
  callBack?: () => void
}
interface Props {
  list: TabItem[]
  modelValue: string | number
  shape?: 'square' | 'round'
  full?: boolean
  center?: boolean
  size?: 'small' | 'large'
  useCloudImg?: boolean
  lineStyle?: boolean
  needScrollIntoView?: boolean
  needScrollAtInit?: boolean
  disableClick?: boolean
  disabled?: boolean
  showIcon?: boolean
  scrollInline?: ScrollLogicalPosition
  withTheme?: boolean
}
defineOptions({
  name: 'BaseTabs',
})
const props = withDefaults(defineProps<Props>(), {
  shape: 'round',
  center: true,
  size: 'small',
  needScrollIntoView: true,
  disableClick: false,
  showIcon: true,
  scrollInline: 'nearest',
})
const emit = defineEmits(['update:modelValue', 'change'])
const { isMobile } = storeToRefs(useWindowStore())

const curTabRef = ref<Array<Element | null>>([])

function onClick(tab: TabItem, i: number) {
  if (tab.value === props.modelValue || tab.disabled || props.disableClick)
    return
  if (tab.callBack)
    tab.callBack()

  if (tab.value !== void 0 && tab.value !== null) {
    emit('update:modelValue', tab.value)
    emit('change', tab.value)
  }

  if (tab.path)
    i18nNavigateTo(tab.path)
  if (tab.value !== void 0 && tab.value !== null) {
    nextTick(() => {
      props.needScrollIntoView && curTabRef.value[i]?.scrollIntoView({
        behavior: 'smooth', block: 'nearest', inline: props.scrollInline,
      })
    })
  }
}

function resetTab(inline?: 'center' | 'nearest') {
  const index = props.list.findIndex(a => a.value === props.modelValue)
  curTabRef.value[index]?.scrollIntoView({
    behavior: 'instant', block: 'nearest', inline: inline ?? 'center',
  })
}

onMounted(() => {
  nextTick(() => {
    if (props.needScrollIntoView && isMobile.value && props.needScrollAtInit) {
      const index = props.list.findIndex(a => a.value === props.modelValue)
      curTabRef.value[index]?.scrollIntoView({
        behavior: 'instant', block: 'nearest', inline: 'center',
      })
    }
  })
})

defineExpose({ resetTab })
</script>

<template>
  <div class="hid flex snap-x snap-mandatory scroll-smooth px-4 smooth-scroll -mx-4 gap-0 overflow-auto hide-scroll">
    <div v-for="t, i in list" :key="i" :ref="el => curTabRef[i] = (el as Element)"
      class="flex h-[2.1875rem] items-center justify-center rounded-[.25rem] px-2 py-0 active" :class="[`tab-${size}`,
      {
        'bg-tab_selected': t.value === modelValue,
        'disabled': t.disabled || disabled,
      }]" @click="onClick(t, i)">
      <div v-if="t.icon && showIcon" class="flex-none h-4 w-4" :class="{ active: t.value === modelValue }">
        <BaseImage v-if="useCloudImg || t.useCloudImg" :url="t.icon" is-cloud loading="eager" />
        <BaseIcon v-else :name="t.icon" />
      </div>
      <span class="ml-1 whitespace-nowrap  font-semibold text-secondary">{{ t.label }}</span>
    </div>
  </div>
</template>

<style>
:root {}
</style>

<style lang='scss' scoped>
.bg-tab_selected {
  background-color: var(--color-bg-black-4);

  .text-secondary {
    color: inherit;
  }
}
</style>
